<template>
  <div class="wrapper-container">
    <el-form ref="form" class="my-form" :model="form" >
      <el-row class="single-row">
        <el-col :span="12">
          <el-row class="item-row">
            <el-col class="name-col" :span="8">
              督导专家姓名
            </el-col>
            <el-col class="content-col" :span="16">
              <el-input
                v-model="form.specialistName"
                style="width: 50%"
                size="small"
                clearable
                @blur="clickZjName"
              ></el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row class="item-row">
            <el-col class="name-col" :span="8">
              任务名称
            </el-col>
            <el-col class="content-col" :span="16">
              <el-input
                v-model="form.taskName"
                style="width: 50%"
                size="small"
                clearable
              ></el-input>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
<!-- 测试提交数据 -->
      <el-row class="single-row">     
        <el-col :span="12">
          <el-row class="item-row">
            <el-col class="name-col" :span="8">
              被听课人名称
            </el-col>
            <el-col class="content-col" :span="16">
              <el-input
                v-model="form.teacherName"
                style="width: 50%"
                size="small"
                clearable
              ></el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row class="item-row">
            <el-col class="name-col" :span="8">
              时间
            </el-col>
            <el-col class="content-col" :span="16">
              <el-date-picker
                v-model="form.date"
                type="date"
                style="width: 50%"
              >
              </el-date-picker>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <el-row class="single-row">
        <el-col :span="12">
          <el-row class="item-row">
            <el-col class="name-col" :span="8">
              听课节次
            </el-col>
            <el-col class="content-col" :span="16">
              <el-input
                v-model="form.tkijc1"
                style="width: 23%"
                size="small"
                clearable
              ></el-input>
              &nbsp; -&nbsp;
              <el-input
                v-model="form.tkijc2"
                style="width: 23%"
                size="small"
                clearable
              ></el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row class="item-row">
            <el-col class="name-col" :span="8">
              地点
            </el-col>
            <el-col class="content-col" :span="16">
              <el-input
                v-model="form.address"
                style="width: 50%"
                size="small"
                clearable
              ></el-input>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <el-row class="single-row">
        <el-col :span="12">
          <el-row class="item-row">
            <el-col class="name-col" :span="8">
              组织单位
            </el-col>
            <el-col class="content-col" :span="16">
              <el-input
                v-model="form.unitName"
                style="width: 50%"
                size="small"
                clearable
              ></el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row class="item-row">
            <el-col class="name-col" :span="8">
              联系人
            </el-col>
            <el-col class="content-col" :span="16">
              <el-input
                v-model="form.linkName"
                style="width: 50%"
                size="small"
                clearable
              ></el-input>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
    <div class="button-group" @click="zjInfosave">
      <div>保存</div>
    </div>
  </div>
</template>

<script>
import { queryzhuanjia,lwbzjSave } from "@/api/teacher/admin";

export default {
  name: "addsupervisioninformation",
  data() {
    return {
      form: {
        specialistName: "",
        taskName: "",
        teacherName: "",
        date: "",
        tkjc1: "",
        tkjc2: "",
        address: "",
        unitName: "",
        linkName: "",
      },
      zjList:[],
    };
  },
  mounted(){
    this.query();
  },
  methods: {
    query(){
      queryzhuanjia().then(res=>{
        if(res.data.code == 200){
          let data = res.data.data;
          data.forEach(element => {
            this.zjList.push(element.xm);
          });
        }
      })
    },
    clickZjName(){
      let result = this.zjList.find(ele => ele === this.form.specialistName);
      if (result) {
        return
      } else {
        this.$message({
          type:'error',
          message:'请输入正确的督导专家姓名！'
        })
      }
    },
    zjInfosave(){
      lwbzjSave(this.form).then(res=>{
        if(res.data.code == 200){
          this.$message({
            type:'success',
            message:'操作成功！'
          });
          this.form = {
            specialistName: "",
            taskName: "",
            teacherName: "",
            date: "",
            tkjc1: "",
            tkjc2: "",
            address: "",
            unitName: "",
            linkName: ""
          };
          this.$router.push({
            path: '/admin/appraisal/manage',
          })
        }
      })
    }
  }
};
</script>
<style scoped lang="less">
.item-row .el-col {
  display: flex;
  align-items: center;
  min-height: 60px;
  border-right: none !important;
}
.item-row .el-col:not(:first-child) {
  border-left: 1px solid rgba(0, 76, 167, 0.39);
}
.single-row .el-col:not(:last-child) {
  border-right: 1px solid rgba(0, 76, 167, 0.39);
}
.my-form .single-row:not(:last-child) {
  border-bottom: 1px solid rgba(0, 76, 167, 0.39);
}
.name-col {
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  color: #004ca7;
  background: rgba(77, 129, 192, 0.1);
}
.content-col {
  padding-left: 10px;
}
.wrapper-container {
  .my-form {
    width: 100%;
    border: 1px solid rgba(0, 76, 167, 0.8);
    // margin: 57px auto 19px;
    border-radius: 4px;
  }
  .button-group {
    cursor: pointer;
    padding-top: 60px;
    width: 915px;
    margin: 0 auto;
    text-align: center;
    > div {
      display: inline-block;
      font-size: 18px;
      padding: 6px 22px;
      border-radius: 6px;
      &:nth-child(1) {
        color: #f3b815;
        border: 1px solid #f3b815;
        background: #fff6ef;
        margin: 0 40px;
      }
    }
  }
}

@import "../../../styles/special.less";

.wrapper-container {
  width: 100%;
  margin: 0 auto;
}
</style>
